<template>
    <div>
        <van-nav-bar title="地址管理" left-text="返回" left-arrow @click-left="back" />
    </div>

    <!-- 背景 -->
    <div class="bg"></div>
    <div class="info">
        <div>
            <div class="list" v-for="(item, index) in addlist">
                <div class="list1">
                    <div class="name">{{ item.name }} {{ item.tel }}</div>
                    <div class="add">{{ item.province }} {{ item.city }} {{ item.county }}{{ item.addressDetail }}</div>
                </div>
                <div class="list2" >
                    <van-icon @click="danshan1" name="delete-o" style="margin-right: 15px;" />
                    <van-icon name="edit" @click="editAddress(item.id, index)"/></div>

            </div>

        </div>

        <div class="settlement">
            <van-button block round @click="box">新增地址</van-button>
        </div>
    </div>
</template>

<script>

import { post } from '../request';
import { get } from "../request";
import { ref } from "vue";
import { useRoute, useRouter } from 'vue-router';

export default {
    setup() {

        const editAddress = (e) => {
            //console.log("e", e);
            router.push({ name: "Address", query: { id: e } })
            console.log("地址", e);
        }
        //存放地址
        const addlist = ref([])
        const findAddress = async () => {
            const res = await get("/findAddress", {
                params: {
                    tokenString: JSON.parse(localStorage.getItem('tokens'))
                }
            })
            addlist.value = res.data.result
            console.log("地址信息", res);
        }
        findAddress()

        // //编辑地址
        // const editAddress = async (e) => {
        //     console.log(e);
        //     const res = await post("/editAddress", {
        //         tokenString: JSON.parse(localStorage.getItem('tokens')),
        //         name: e.name,
        //         aid: e.aid,
        //         tel: e.tel,
        //         province: e.province,
        //         city: e.city,
        //         county: e.county,
        //         addressDetail: e.addressDetail,
        //         areaCode: e.areaCode,
        //         postalCode: 514500,
        //         isDefault: Number(e.isDefault)
        //     })
        //     console.log("编辑地址", res);
        //     if(res.data.code == 9000){
        //         route.push({ name: 'Address'})
        //     }
        // }

        //返回
        const back = () => {
            router.go(-1);
        }
        //跳转
        const box = () => {
            router.push({ name: 'Address' })
        }
        const router = useRouter();
        const route = useRoute();

        //删除方法
        const del = async (aid) => {
            console.log(aid);
            const res = await post("/deleteAddress", {
                tokenString: JSON.parse(localStorage.getItem('tokens')),
                aid,
            })
            console.log("删除", res);
            if (res.data.code == 7000) {
                addlist()
            }
        }
        const danshan1 = (e) => {
            // 页面删除 / 数据删除
            console.log(e);
            addlist.value.splice(e, 1)
            del(JSON.stringify([e]))
            console.log("删除1", addlist.value);

        }

        return {
            box,
            back,
            addlist,
            editAddress,
            danshan1

        }
    }
}
</script>

<style lang="less" scoped>
.list {
    padding: 5px;
    line-height: 40px;
    margin-left: 10px;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #e8e8e8;
    font-size: 14px;

    &:nth-last-child(1) {
        border: none;
    }
    .list2{
      
        margin-top: -30px;
        margin-left: 285px;
    }
   
    

    .name {
        font-size: 16px;
    }

    .add {
        margin-top: -10px;
        font-size: 14px;
    }
}

.info {
    border-radius: 5px;
    position: relative;
    top: -30px;
    left: 0;
    width: 95%;
    margin: 0 auto;
    box-sizing: border-box;
    background-color: rgba(255, 255, 255, );
}

.bg {
    height: 100px;
    background-color: #ff8c8c;
}

.settlement {
    position: absolute;
    bottom: 10px;
    width: 90%;
    margin-left: 15px;
    margin-bottom: -60px;
}

.settlement .van-button--default {
    color: #fff;
    background: linear-gradient(to right, #404dd9, #182078);
    border: none;

}</style>